<template>
  <div class="common-tabs" ref="tabs">
    <!--tabs切换标题-->
    <el-tabs v-model="tabsProp.tabsActive" @tab-click="HandleUtils.handleParent($parent, 'tabsSwitchClick')">
      <template v-for="(item,key) in tabsProp.tabPaneOption">
        <el-tab-pane
            :key="key"
            :name="item.value"
            :label="item.label"
            v-if="Utils.arrayContain(item.routerRole,$store.state.routerRole)">
        </el-tab-pane>
      </template>
    </el-tabs>

    <div class="common-tabs-right" v-if="tabsProp.tabsSeniorSearchShow">
      <div class="common-tabs-right-search">
        <el-button type="info" @click="tabsProp.tabsSeniorSearchDropDown=!tabsProp.tabsSeniorSearchDropDown">
          高级搜索
          <i :class="[tabsProp.tabsSeniorSearchDropDown?'el-icon-bottom':'el-icon-top','el-icon--right']"></i>
        </el-button>
      </div>
    </div>

    <!--tabs 搜索下拉的值-->
    <el-collapse-transition  v-if="tabsProp.tabsSeniorSearchShow">
      <div v-if="tabsProp.tabsSeniorSearchDropDown">
        <!--搜索字段-->
        <common-tabs-from
            :tabsToConfigure="tabsProp.tabsToConfigure"
            :tabsFieldProp="toConfigureFieldDialog.tabsFieldProp"
            :tabsSearchData="tabsSearchData"
        />
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['tabsProp','toConfigureFieldDialog','tabsSearchData'],
  data() {
    return {};
  },
  mounted() {
  },
  methods: {},
};
</script>

<style lang="scss" scoped></style>
